<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360商城-商品</title>
    <link rel="stylesheet" href="../iconfont/base.css">
    <link rel="stylesheet" href="../电商.confont/iconfont.css">
    <link rel="stylesheet" href="../搜索confont/iconfont.css">
    <link rel="stylesheet" href="../360详情页.allconfont/iconfont.css">
    <!-- <script src="./shop2.js"></script> -->
    <link rel="stylesheet" href="./shop.css">
    <!-- <script src="../js/cookie.js"></script> -->
    <script src="../js/ajax.js"></script>
    <script src="../js/cookie.js"></script>
    <!-- <script src="./shop.js"></script> -->
    <script src="./shop.js"></script>
    <style>
        .active {
            background-color: #FFEBE9 !important;
            border: 1px solid #f33 !important;
        }

        .container3 {
            margin: auto;
            width: 998px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="header" id="header">
        <div class="container1">
            <div class="left">
                <a href="">帮助中心</a>
                <a href="">收藏</a>
                <a href="">360官网</a>
                <a href="">360智慧生活</a>
            </div>
            <div class="right">
                <a href="" id="login">登录</a>
                <a href="">注册</a>
                <a href=""><i class="iconfont icon-gouwudai1"></i></a>
            </div>
        </div>
    </div>
    <div class="search">
        <div class="left">
            <img src="../images/shop.logo.png" alt="" class="logo">
            <a href="" class="a1">新品推荐</a>
            <a href="">热卖榜单</a>
        </div>
        <div class="right">
            <form action="">
                <input type="text">
                <a href=""><i class="iconfont icon-sousuo4"></i></a>
            </form>
            <p>
                <a href="">记录仪</a>
                <a href="">摄像机</a>
                <a href="">路由器</a>
                <a href="">耳机</a>
                <a href="">扫地机</a>
                <a href="">智能手表</a>
            </p>
        </div>
        <div class=""></div>
        <!-- search的二级导航-没做 -->
    </div>
    <div class="spin">
        <div class="left">
            <div class="fdjbox">
                <div class="show" id="show">
                    <img id="ten" src="https://p1.ssl.qhimg.com/t0174e15b118d375a36.webp" alt="" class="img1">
                    <div class="mask"></div>
                    <!-- mask是划过的黄色块 -->
                </div>
                <div class="list" id="spinlist">
                    <p class="active">
                        <img id="ba" src="https://p1.ssl.qhimg.com/t0174e15b118d375a36.png" alt="" class="img2"
                            midelImg="https://p1.ssl.qhimg.com/t0174e15b118d375a36.webp">
                        <!-- 要给个属性值 -->
                    </p>
                    <p>
                        <img id="jiu" src="https://p2.ssl.qhimg.com/t0197495cf5b561b39f.png" alt="" class="img2"
                            midelImg="https://p2.ssl.qhimg.com/t0197495cf5b561b39f.png">
                    </p>
                </div>
                <div class="enlarge"></div>
            </div>
            <!-- 放大镜部分 -->
            <div class="promise">
                <p>
                    <a href=""><i class="iconfont icon-gou"></i></a>
                    <span>360商城发货&售后</span>
                    <a href=""><i class="iconfont icon-gou"></i></a>
                    <span>满99元包邮</span>
                </p>
                <p>
                    <a href=""><i class="iconfont icon-gou"></i></a>
                    <span>7天无理由退货</span>
                    <a href=""><i class="iconfont icon-gou"></i></a>
                    <span>15天免费换货</span>
                </p>
            </div>
        </div>
        <!-- left -->
        <div class="right" id="spinright">
            <div class="box1">
                <p id="yi">360 智能扫地机器人X100 MAX</p>
                <p id="er">三目激光雷达矩阵 隐藏雷达 超薄机身</p>
                <div class="third">
                    <p class="p1">
                        <span>价&nbsp;&nbsp;&nbsp;格</span>
                        <span id="san">￥2399.00</span>
                        <span id="si">￥3299</span>
                    </p>
                    <p class="p2">
                        <span>促&nbsp;&nbsp;&nbsp;销</span>
                        <span>直降</span>
                        <span id="wu">立减 900.00元</span>
                    </p>
                </div>
                <p class="p3">物流公告：受疫情影响，福建省厦门市、泉州市、莆田市、福州市，江苏省连云港市、扬州市广陵区、邗江区等部分地区暂停发货。</p>
            </div>
            <div class="box2">
                <p>
                    <span>分&nbsp;&nbsp;&nbsp;类</span>
                    <span class="span active" id="xinghao1">X100 MAX</span>
                    <span class="span" id="xinghao2">X100-PJ-04</span>
                </p>
                <p>
                    <span>数&nbsp;&nbsp;&nbsp;量</span>
                    <button class="button1">-</button>
                    <input type="text" value="1" id="numinput">
                    <button class="button2">+</button>
                </p>
                <p>
                    <span class="span">查看购物车</span>
                    <span class="span span2" id="addCar">加入购物车</span>
                    <span class="span3"></span>
                </p>
            </div>
        </div>
        <!-- right -->
    </div>
    <!--spin-->

    <div class="bigtu1">
        <img src="https://p0.ssl.qhimg.com/t0130ba4ca979c28f6a.jpg" alt="">
        <img src="https://p3.ssl.qhimg.com/t017296043c72946c46.jpg" alt="">
    </div>
    <!--bigtu1-->

    <div class="pinglun">
        <ul>
            <li><span class="pinglunactive">产品详情</span></li>
            <li><span>规格参数</span></li>
            <li><span>评价(4)</span></li>
            <li><span>常见问题</span></li>
        </ul>

        <div class="right">
            <span>查看购物车</span>
            <span>加入购物车</span>
        </div>
    </div>
    <!--pinglun-->

    <div class="bigtu2">
        <div class="box">
            <img src="https://p1.ssl.qhmsg.com/t0110639822a5a9fbf6.webp" alt="">
            <img src="https://p0.ssl.qhimg.com/t01167041b22a25c337.jpg" alt="">
            <img src="https://p4.ssl.qhimg.com/t0191e5e5c05c89842f.jpg" alt="">
            <img src="https://p1.ssl.qhimg.com/t0129e319adde2b3d08.jpg" alt="">
        </div>
        <div class="shuoming">
            <p>价格说明</p>
            <p>未划线价:</p>
            <p>商品的实时标价，具体成交价格根据商品参加活动或使用优惠券、积分等发生变化，最终以订单结算页价格为准。</p>
            <p>划线价：</p>
            <p>商品展示的划横线价格为该商品在360商城上曾经展示过的销售价，并非原价。</p>
            <p>异常问题：</p>
            <p>商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。</p>
            <p>*此价格说明仅在有价格对比时有效。</p>
        </div>
    </div>

    <div class="canshu3 container3">
        <p class="p1">规格参数</p>
        <p class="p2">暂无规格参数</p>
        <p class="p3">商品评价</p>
        <p class="p4">
            <span>全部(4)</span>
            <span>有图(0)</span>
        </p>
        <div class="pingjiabox">
            <div class="list">
                <p>
                    <img class="img1" src="https://p5.ssl.qhimg.com/t0103a59ac2f85d789a.png" alt="">
                    <span>猪猪</span>
                    <img class="img2" src="https://p2.ssl.qhimg.com/t014cfa6ed19a1a1ef5.png" alt="">
                    <span class="span2">
                        <a href="">1</a>
                        <a href="">2</a>
                        <a href="">3</a>
                        <a href="">4</a>
                        <a href="">5</a>
                    </span>
                </p>
                <p>此用户没有填写评价</p>
                <p>X100-PJ-042021-08-28 14:25:51</p>
            </div>
            <div class="list">
                <p>
                    <img class="img1" src="https://p5.ssl.qhimg.com/t0103a59ac2f85d789a.png" alt="">
                    <span>猪猪</span>
                    <img class="img2" src="https://p2.ssl.qhimg.com/t014cfa6ed19a1a1ef5.png" alt="">
                    <span class="span2">
                        <a href="">1</a>
                        <a href="">2</a>
                        <a href="">3</a>
                        <a href="">4</a>
                        <a href="">5</a>
                    </span>
                </p>
                <p>此用户没有填写评价</p>
                <p>X100-PJ-042021-08-28 14:25:51</p>
            </div>
            <div class="list">
                <p>
                    <img class="img1" src="https://p5.ssl.qhimg.com/t0103a59ac2f85d789a.png" alt="">
                    <span>猪猪</span>
                    <img class="img2" src="https://p2.ssl.qhimg.com/t014cfa6ed19a1a1ef5.png" alt="">
                    <span class="span2">
                        <a href="">1</a>
                        <a href="">2</a>
                        <a href="">3</a>
                        <a href="">4</a>
                        <a href="">5</a>
                    </span>
                </p>
                <p>此用户没有填写评价</p>
                <p>X100-PJ-042021-08-28 14:25:51</p>
            </div>
        </div>
    </div>



    <div class="fixed">
        <a href="" id="dibu">
            顶部
        </a>
    </div>

    <script>
        // 固定， 回到顶部。


        let dibu = document.querySelector("#dibu");
        dibu.onclick = function (e) {
            var e = e || window.event;
            e.preventDefault();
            scrollTo({
                top: 0
            })
        }

        let header = document.querySelector("#header");
        window.onscroll = function () {
            var y = scrollY; //被卷去的高度。
            if (y >= 100) {
                dibu.style.display = "block";
                header.style.position = "fixed";
                header.style.top = "0px";
                header.style.zIndex = '100000';
                header.style.width = "100%"
                // header.style.backgroundColor = "#fff"
            } else {
                header.style.position = "static";
            }
        }


        // 跳转地址
        let login = document.querySelector("#login");
        login.onclick = function (e) {
            var e = e || window.event;
            e.preventDefault();
            location.href = "../login/login.html";
        }

        // 添加、移除active
        let xinghao1 = document.querySelector("#xinghao1");
        let xinghao2 = document.querySelector("#xinghao2");
        xinghao1.onclick = function () {
            // console.log(1);
            let flag = xinghao1.classList.contains("active");
            // console.log(flag);
            if (flag == false) {
                xinghao1.classList.add("active");
                xinghao2.classList.remove("active");
            }
        }
        xinghao2.onclick = function () {
            let flag = xinghao2.classList.contains("active");
            // console.log(flag);
            if (flag == false) {
                xinghao2.classList.add("active");
                xinghao1.classList.remove("active")
            }
        }
    </script>
</body>

</html>